<!-- 列表 + 分页 -->
<template>
  <div class="list-pagination">

    <ul class="list-ul">
      <li class="list-li" @click="clickListItem(item)" v-for="item in listCon" :key="item.id">
        <span class="list-span-first">{{item.cont}}</span>
        <span class="list-span">{{item.timeItem}}</span>
      </li>
    </ul>

    <div class="pagination-con">
      <!-- <el-pagination
        layout="prev, pager, next"
        @current-change="hotelCurrentChange"
        :total="10"
        :page-size="10">
      </el-pagination> -->

      <!-- <el-pagination
        layout="prev, pager, next"
        :total="10"
        :page-size="10">
      </el-pagination> -->
    </div>

  </div>
</template>

<script>
export default {
  props: {
    listCon: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    clickListItem (item) {
      this.$emit('clickListItem', item)
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.list-pagination {
  .list-ul {
    display flex
    justify-content center
    align-items center
    flex-direction column
    margin 10px 0 0px
  }
}
.list-li {
  display flex
  justify-content space-between
  width 70%
  padding 15px 20px
  border-bottom 1px dotted #ddd
  cursor default
  &:hover {
    color #39ADFF
    background rgba(0,0,0,0.03)
  }
  .list-span-first {
    width 80%
    text-align left
    text-overflow: ellipsis
    overflow: hidden
    white-space: nowrap
  }
}

.pagination-con {
  margin 20px 0
}
</style>
